<template>
    <div class="madp-statistical">
        <basic-container>
            <BackTitle title="群统计页" @goBack="goBack(1)" />
        </basic-container>
        <basic-container>
            <div class="madp-common-title">群成员统计数据</div>
            <statistics-card :cardInfo="cardInfo" :cardData="statisticalData" />
        </basic-container>
        <basic-container>
            <div class="madp-common-title">趋势图</div>
            <div class="madp-type-wrapper">
                <el-date-picker
                    v-model="searchDate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                ></el-date-picker>
                <el-button class="madp-type" :type="type === '1' ? 'primary' : ''" @click="changeType('1')">按日</el-button>
                <el-button class="madp-type" :type="type === '2' ? 'primary' : ''" @click="changeType('2')">按周</el-button>
                <el-button class="madp-type" :type="type === '3' ? 'primary' : ''" @click="changeType('3')">按月</el-button>
            </div>
            <div>
                <p>
                    这段时间里，该群共新增成员数
                    {{ statisticalData.addNumRange }} 人，成员退群 {{ statisticalData.outNumRange }} 人
                </p>
            </div>
            <div id="statisticalECharts" style="width: 100%; height: 400px; margin: 30px auto"></div>
            <div class="madp-horizontal-divider"></div>
            <div>
                <div class="madp-common-title">详细数据</div>
                <div class="madp-common-mt">
                    <el-table
                        :header-cell-style="{
                            background: 'rgb(255, 191, 191)',
                            color: 'rgb(44,44,44)'
                        }"
                        :data="tableData"
                        style="width: 100%"
                    >
                        <el-table-column prop="time" align="center" label="时间"></el-table-column>
                        <el-table-column prop="addNum" align="center" label="新增成员数"></el-table-column>
                        <el-table-column prop="outNum" align="center" label="退群人数"></el-table-column>
                        <el-table-column prop="total" align="center" label="当前成员数"></el-table-column>
                        <el-table-column prop="outTotal" align="center" label="累计退群成员数"></el-table-column>
                    </el-table>
                    <div class="madp-table-page">
                        <el-pagination
                            background
                            :current-page="page.currentPage"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-sizes="[10, 20, 30, 50, 100]"
                            :page-size="page.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="page.total"
                            style="float: right"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </basic-container>
    </div>
</template>

<script>
import { getLineChart, getStatisticsList } from '@/api/customer-group/group-list';
import StatisticsCard from '@/components/statistics-card/';
const eCharts = require('echarts');
export default {
    name: 'statistical',
    props: ['workRoomId'],
    components: {
        StatisticsCard
    },
    data() {
        return {
            // 时间限制
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            // 基础信息
            statisticalData: {
                addNum: 0,
                outNum: 0,
                total: 0,
                outTotal: 0,
                addNumRange: 0,
                outNumRange: 0
            },
            // 表格数据
            searchDate: [],
            type: '2',
            // 图表数据
            option: {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['新增成员', '离开成员']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '新增成员',
                        type: 'line',
                        // stack: '总量',
                        data: []
                    },
                    {
                        name: '离开成员',
                        type: 'line',
                        // stack: '总量',
                        data: []
                    }
                ]
            },
            // 表格数据
            tableData: [],
            // echart
            myECharts: null,
            // 分页
            page: {
                total: 0,
                currentPage: 1,
                pageSize: 10
            },
            // 卡片信息
            cardInfo: [
                {
                    label: '今日新增成员数',
                    key: 'addNum',
                    color: '#FFD700'
                },
                {
                    label: '今日退群成员数',
                    key: 'outNum',
                    color: '#FF8C00'
                },
                {
                    label: '当前群成员数',
                    key: 'total',
                    color: '#90EE90'
                },
                {
                    label: '累计退群成员数',
                    key: 'outTotal',
                    color: '#00CED1'
                }
            ]
        };
    },
    mounted() {
        this.initECharts();
        this.getChart(this.type);
        this.getList(this.page);
    },
    methods: {
        // 返回
        goBack(val) {
            this.$emit('goBack', val);
        },
        //列表
        getList(page, params) {
            let obj = Object.assign(
                {
                    type: this.type,
                    workRoomId: this.workRoomId,
                    current: page.currentPage,
                    size: page.pageSize,
                    startTime: this.searchDate[0],
                    endTime: this.searchDate[1]
                },
                params
            );
            getStatisticsList(obj).then((res) => {
                if (res.data.code === 0) {
                    this.tableData = res.data.data.records;
                    this.page.total = res.data.data.total;
                }
            });
        },
        //获取折线图数据
        getChart(type, params) {
            let obj = Object.assign({ type: type, workRoomId: this.workRoomId }, params);
            getLineChart(obj).then((res) => {
                if (res.data.code === 0) {
                    // let nArr = res.data.data.createTime.split('-');
                    // this.pickerOptions = {
                    // 	disabledDate(time) {
                    // 		return time.getTime() < new Date(`${nArr[0]}.${nArr[1]}.${nArr[2]}`);
                    // 	},
                    // };
                    Object.assign(this.statisticalData, res.data.data);
                    //数据拆分
                    let time = [],
                        addNum = [],
                        outNum = [];
                    this.statisticalData.list.forEach((item) => {
                        time.push(item.time);
                        addNum.push(item.addNum);
                        outNum.push(item.outNum);
                    });
                    this.option.xAxis.data = time;
                    this.option.series = this.option.series.map((item) => {
                        item.name === '新增成员' ? (item.data = addNum) : (item.data = outNum);
                        return item;
                    });
                    this.myECharts.setOption(this.option);
                }
            });
        },
        // 更新类型
        changeType(type) {
            if (type === '1' && this.searchDate.length > 0) {
                let startTime = this.searchDate[0],
                    endTime = this.searchDate[1];
                this.type = type;
                this.getChart(type, { startTime, endTime });
                this.getList(this.page, { startTime, endTime });
                return;
            } else if (type === '1') {
                this.$message({
                    type: 'error',
                    message: '按日查询请选择日期'
                });
                return;
            } else {
                this.searchDate = [];
                this.type = type;
                this.getChart(type);
                this.getList(this.page);
            }
        },
        //初始化 eCharts
        initECharts() {
            this.myECharts = eCharts.init(document.getElementById('statisticalECharts'));
            this.myECharts.setOption(this.option);
        },
        // 分页
        handleSizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.getList(this.page);
        },
        handleCurrentChange(currentPage) {
            this.page.currentPage = currentPage;
            this.getList(this.page);
        }
    }
};
</script>

<style scoped lang="scss">
.madp-statistical {
    .madp-number-box {
        height: 120px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .madp-number {
            width: 23%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            color: #fff;

            h1 {
                font-size: 24px;
                color: #fff;
            }
        }

        .madp-one {
            background: #40a9ff;
        }

        .madp-two {
            background: #fcc71b;
        }

        .madp-thr {
            background: #8f8aff;
        }

        .madp-four {
            background: #f9688e;
        }
    }

    .madp-type-wrapper {
        margin: 20px 0;

        .madp-type {
            margin-left: 20px;
        }
    }
}
.madp-horizontal-divider {
    width: 100%;
    height: 4px;
    margin: 20px 0;
    background-color: #f0f2f5;
}
/deep/ .el-date-editor .el-range-separator {
    width: 25px !important;
}
.madp-common-title {
    font-size: 16px;
    font-weight: bold;
}
.madp-common-mt {
    margin-top: 20px;
}
.madp-table-page {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
}
</style>
